@import '~themes/vars.less';
@import '~themes/index.less';

:global {
    #nprogress {
        pointer-events: none;

        .bar {
            background: @primary-color;
            position: fixed;
            z-index: 2048;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 2px;
        }

        .peg {
            display: block;
            position: absolute;
            right: 0;
            width: 100px;
            height: 100%;
            box-shadow: 0 0 10px @primary-color, 0 0 5px @primary-color;
            opacity: 1;
            transform: rotate(3deg) translate(0, -4px);
        }

        .spinner {
            display: block;
            position: fixed;
            z-index: 1031;
            top: 15px;
            right: 15px;
        }

        .spinner-icon {
            width: 18px;
            height: 18px;
            box-sizing: border-box;
            border: solid 2px transparent;
            border-top-color: @primary-color;
            border-left-color: @primary-color;
            border-radius: 50%;

            :local {
                animation: nprogress-spinner 400ms linear infinite;
            }
        }
    }

    .nprogress-custom-parent {
        overflow: hidden;
        position: relative;

        #nprogress {
            .bar,
            .spinner {
                position: absolute;
            }
        }
    }
}

@keyframes nprogress-spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
